<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>运动二</title>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			div{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				top: 50px;
				left: 50px;
			}
		</style>
		<script type="text/javascript">
			//距离 时间 速度
			window.onload = function()
			{
				var oBox = document.getElementById('box');
				//求出来总时间 多久能走完
				var time = 1000;
				//求总次数    parseInt(1000/30)
				var count = parseInt(1000/30);
				//当前次数 从0开始
				var n = 0;
				//求起始位置
				var start = 50;
				//求站点位置
				var end = 500;
				//求出运动距离
				var dis = end - start;//500-50
				
				oBox.onclick = function()
				{
					var timer = setInterval(function(){
						n++;
						//n  1  2  3  .....
						//
						oBox.style.left = start+dis*n/count+'px';
						
						if(n == count){
							clearInterval(timer);
						}
						
					},30);
				}
			}
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>
